<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      批量补单申请
    </template>
     <el-form
    ref="refForm"
    :rules="refRule"
    :disabled="loading"
    :model="form" class="demo-form-inline">
    <el-form-item prop="users">
      <slot name="label">
        <div class="label">输入用户名</div>
      </slot>
      <el-tip>请输入会员或代理账户名(多个用户名请用逗号隔开,若有重复用户将自动去除)</el-tip>
      <el-col :span="10">
        <el-input type="textarea" spellcheck="false" rows="6" v-model="form.username" @change="usersChange" ></el-input>
      </el-col>
    </el-form-item>
    <div style="padding: 20px 0 20px 150px">
      <el-button class="filter-item" type="primary" icon="el-icon-printer" @click="nextStep">下一步</el-button>
    </div>
  </el-form>
  </el-dialog>
</template>

<script>

// mixins
import { form } from '@/build';

// services
import { validateAdjustmentUsers } from '@/services/api/adjustment';
import { multiplyApplyReorder } from '@/services/api/recharge';

export default {
  name: 'multiple-recharge-dialog',
  props: ['value'],
  mixins: [form],
  data() {
    return {
      inValidateUsers: [],
      form: {
        username: undefined,
      },
      refRule: {},
    };
  },
  methods: {
    nextStep() {
      multiplyApplyReorder(this.form).then(([result, data]) => {
        if (result) {
          this.$emit('multipleNext', data);
        }
      });
    },
    usersChange(val) {
      val = val.replace(/，/g, ',');
      const users = _.uniq(val.split(',')).filter(d => d).join(',');
      this.$_validateUsers(users);
      this.form.username = users;
    },
    $_validateUsers(users) {
      validateAdjustmentUsers({ users }).then(([result, data]) => {
        if (result) {
          this.inValidateUsers = data;
        }
      });
    },
  },
  mounted() {

  },
};
</script>

<style scoped>
</style>
